<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景资源管理</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>

<style>
 /*表格操作栏 自定义样式*/
 .el-link {
     margin-right:8px;
 }
 #scriptList {
     height:100%;
 }
 #search .el-card__body {
     height:40px;
 }
 #table {
     height:calc(100% - 74px);
 }
 /*翻页样式*/
 .el-pagination {
     margin-top: 5px;
 }
</style>
<div id="scriptList">
    <!--    查询框-->
    <el-card id="search">
        <el-form :inline="true" :model="scriptForm" class="demo-form-inline">
            <el-form-item label="脚本名称">
                <el-input v-model="scriptForm.name" clearable placeholder="请输入脚本名称" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="预案名称">
                <el-select v-model="scriptForm.asid" clearable placeholder="选择预案">
                    <el-option
                            v-for="item in asList"
                            :key="item.index"
                            :label="item.asName"
                            :value="item.asid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事件级别">
                <el-select v-model="scriptForm.level" clearable placeholder="选择事件级别">
                    <el-option
                            v-for="item in 4"
                            :key="item.index"
                            :label=`${item}级事件`
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="searchScriptHandle" size="large">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="scriptList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    prop="scriptName"
                    label="脚本名称">
            </el-table-column>
            <el-table-column
                    prop="assumptions.asName"
                    label="预案">
            </el-table-column>
            <el-table-column
                    label="事件级别">
                <template slot-scope="scope">
                    {{scope.row.responseLevel | level}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280">
                <template slot-scope="scope">
<!--                    {{ scope.row.categoryId | asType }}-->
                    <el-link icon="el-icon-s-platform" @click="scriptEdit(scope.row.scriptid)" type="primary">视频管理</el-link>
                    <el-link icon="el-icon-picture" @click="imgEdit(scope.row.scriptid)" type="primary">图片管理</el-link>
                    <el-link icon="el-icon-s-order" @click="sceneDescription(scope.row.scriptid)" type="primary">场景说明</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="scriptList.length">
        </el-pagination>
    </el-card>
</div>
<script>
	var scriptId;
    var scriptList = new Vue({
        el: "#scriptList",
        data() {
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 10,
                //脚本查询表单
                scriptForm:{
                    //预案id
                    asid:"",
                    //事件级别
                    level:"",
                    //脚本名称
                    name:"",
                    page:1,
                    size:99999999
                },
                //脚本数据列表
                scriptList:[],
                //预案数据列表
                asList:[],
            }
        },
        filters:{
          level(val){
              return val + "级事件";
          }
        },
        mounted() {
            //查询所有预案
            this.asSearch();
            //查询所有脚本
            this.searchScript();
        },
        methods: {
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //查询所有预案
            asSearch() {
                let params = {
                    categoryid: "",
                    keyword: ""
                }
                axios.get('/assumption/list', {params}).then(res => {
                    this.asList = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            //手动查询脚本
            searchScriptHandle(){
                if(this.scriptForm.name == "" && this.scriptForm.asid == "" &&this.scriptForm.level == ""){
                    this.$message.error("请输入脚本名称或选择预案或选择事件级别！");
                }else{
                    this.searchScript();
                }
            },
            //查询页码纠正
            deleteCorrect2(data){
                const totalPage = Math.ceil(data.length / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //查询脚本
            searchScript() {
                let params = {}
                let obj = this.scriptForm;
                Object.keys(obj).forEach(key=>{
                    params[key] = obj[key];
                });
                axios.get('/script/list',{params}).then(res=>{
                    if(res.data.success){
                        this.scriptList = res.data.content;
                        this.deleteCorrect2(this.scriptList);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //视频管理（携带脚本id跳转）
            scriptEdit(id){
            	scriptId = id;
            	layer.open({
                    type: 2,
                    title: '脚本视频绑定',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['80%', '80%'],
                    content: '/dialog/script/vedio.html',
                    end: () => {
                        // this.searchAllScene();
                        // sceneData = {};
                    }
                });
            },
            //图片管理
            imgEdit(id){
                scriptId = id;
                layer.open({
                    type: 2,
                    title: '脚本图片绑定',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['80%', '80%'],
                    content: '/dialog/script/img.html',
                });
            },
            //场景说明
            sceneDescription(id){
                scriptId = id;
                layer.open({
                    type: 2,
                    title: '编辑场景说明',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['80%', '80%'],
                    content: '/dialog/script/description.html',
                });
            }
        }
    })
</script>
</body>
</html>